<template>
  <div class="ghd">
    <div class="ghd-item-1">
      <img
        src="http://img11.360buyimg.com/mobilecms/s200x200_jfs/t1/108000/26/9327/183975/5e72c8bdEcb7944a1/9d2aacb4d2af55e3.jpg.webp"
        alt
      />
      <div class="ghd-title">沃尔玛海外官方旗舰店</div>
      <span>极速狂飙</span>
      <p>268.2万人关注</p>
    </div>
    <div class="ghd-item-2">
      <img
        src="https://img20.360buyimg.com/mobilecms/s200x200_jfs/t1/79391/16/10753/346386/5d833611E4e6bafb4/93d643e7641dd7dd.jpg.webp"
        alt
      />
      <div class="ghd-title">KOLON SPORT 官方旗舰店</div>
      <span>随心所动</span>
      <p>64.4万人关注</p>
    </div>
  </div>
</template>

<style lang="scss">
.ghd {
  padding: 10px;
  &-item-1,
  &-item-2 {
    position: relative;
    height: 110px;
    padding: 15px;
    img {
      width: 30%;
      padding: 5px;
      float: right;
      background: #fff;
      border-radius: 5px;
    }
    span {
      display: inline-block;
      margin-top: 5px;
      padding: 2px;
      color: #596fab;
      border: 1px solid #596fab;
      border-radius: 2px;
    }
    p {
      position: absolute;
      bottom: 10px;
      color: #aaa;
    }
  }
  &-item-1 {
    background-color: #f1f5f9;
    margin-bottom: 10px;
  }
  &-item-2 {
    background-color: #f1f5f0;
  }
}
</style>